<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="12">
          <a-col span="6">
            <a-form-item :label-col="{span: 4}" :wrapper-col="{span: 6, offset: 1}">
              <a-input v-model="queryParam.title" placeholder="请输入标题进行模糊检索"/>
            </a-form-item>
          </a-col>
          <a-col  span="3">
            <a-form-item :label-col="{span: 4}" :wrapper-col="{span: 14, offset: 1}">
              <ants-dict-select-tag v-model="queryParam.articleType" placeholder="文章类型" dict-code="article_type"/>
            </a-form-item>
          </a-col>
          <a-col span="3">
            <a-form-item :label-col="{span: 4}" :wrapper-col="{span: 14, offset: 1}">
              <ants-dict-select-tag v-model="queryParam.publishState" placeholder="状态" dict-code="publish_state"/>
            </a-form-item>
          </a-col>
          <a-col span="4">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="text"  @click="searchQuery">查询</a-button>
              <a-button type="text" style="margin-left: 8px" @click="searchReset">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="article_manage_list">
      <div data-v-49438a9a="" class="ma-mskLoading" v-if="loading">
        <div data-v-49438a9a="" class="ma-line-scale">
          <div data-v-49438a9a=""></div>
          <div data-v-49438a9a=""></div>
          <div data-v-49438a9a=""></div>
          <div data-v-49438a9a=""></div>
          <div data-v-49438a9a=""></div>
        </div>
      </div>
      <div v-if="!loading && dataSource.length === 0">
        <div>
          <div data-v-7904041c="" class="active blank_list">
            <img data-v-7904041c="" src="https://mp-blog.csdn.net/mp_blog/img/monkey-blank.137fa3ce.png" class="monkey_lank">
            <div data-v-7904041c="" class="blank_tips">
              空空如也
            </div>
          </div>
        </div>
      </div>
      <div style="">
        <div class="article-list-item-mp" v-for="(item,index) in dataSource">
          <div class="list-item-mp-right">
            <div class="list-item-title">
              <p class="article-list-item-txt">
                <router-link :to="'/articleDetails/'+item.id" target="_blank" class="item-info-oper-text">
                  【{{item.title}}】
                </router-link>
              </p>
              <p class="article-list-item-time">{{item.publishTime}}</p>
            </div>
            <div class="article-list-type">
              <span class="type-text text-1" v-if="item.articleType === '1'"> 原创 </span>
              <span class="type-text text-2" v-else-if="item.articleType === '2'"> 转载 </span>
              <span class="article-list-item-tag" v-else-if="item.articleType === '3'"> 翻译 </span>

              <span class="type-text text-1" v-if="item.publishState === '1'"> 已发布 </span>
              <span class="type-text text-2" v-else-if="item.publishState === '2'"> 定时发布 </span>
              <span class="article-list-item-tag" v-else-if="item.publishState === '3'"> 草稿 </span>

            </div>
            <div class="article-list-item-info">
              <div class="item-info-left">
                <p class="article-list-item-readComment"> 阅读 {{item.viewsNum}} </p><span class="circle-step"></span>
                <p class="article-list-item-readComment"> 点赞 {{item.likesNum}} </p><span class="circle-step"></span>
                <p class="article-list-item-readComment"> 收藏 {{item.collectNum}} </p>
              </div>
              <div class="item-info-oper">
                <template v-if="user.name === 'chenshuang'">
                  <span @click="handleIsTop(item,'1')" v-if="item.isRecommend === '0'" class="item-info-oper-text">
                    置顶
                  </span>
                  <span @click="handleIsTop(item,'0')" v-else class="item-info-oper-text">
                    取消置顶
                  </span>
                  <a-divider type="vertical"/>
                </template>
                <router-link :to="'/articleDetails/'+item.id" target="_blank" class="item-info-oper-text">
                  预览
                </router-link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div class="el-pagination is-background">
        <a-pagination
          size="small"
          :pageSizeOptions="pagination.pageSizeOptions"
          show-size-changer
          :default-current="1"
          :page-size.sync="pagination.pageSize"
          :total="pagination.total"
          @change="onChange"
          :show-total="(total, range) => `${range[0]}-${range[1]} 共 ${total} 条`"
          @showSizeChange="onShowSizeChange"
        />
      </div>
    </div>
  </a-card>

</template>

<script>
import {TableListMixin} from '@/mixins/TableListMixin'
import RecycleBin from '../articleList/modules/RecycleBin'
import AntsEllipsis from "@/components/ants/AntsEllipsis";
import AntsDictSelectTag from "@/components/dict/AntsDictSelectTag";
import {postAction} from "@/api/manage";
import {mapGetters} from "vuex";

export default {
  name: 'ArticleList',
  components: {
    RecycleBin,
    AntsEllipsis,
    AntsDictSelectTag
  },
  mixins: [TableListMixin],

  data() {
    return {
      /* 排序参数 */
      sorter: {
        column: 'publishTime',
        order: 'desc'
      },
      description: '文章管理',
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 120,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '标题',
          align: 'center',
          dataIndex: 'title',
          width: 260,
          scopedSlots: {customRender: 'articletitle'}
        },
        {
          title: '作者',
          align: 'center',
          dataIndex: 'createBy_dictText',
        },
        {
          title: '文章类型',
          align: 'center',
          dataIndex: 'articleType_dictText',
          scopedSlots: {customRender: 'articleType'}
        },
        {
          title: '收藏数',
          align: 'center',
          dataIndex: 'collectNum'
        },
        {
          title: '点赞数',
          align: 'center',
          dataIndex: 'likesNum'
        },
        {
          title: '浏览数',
          align: 'center',
          dataIndex: 'viewsNum'
        },
        {
          title: '发布时间',
          align: 'center',
          dataIndex: 'publishTime'
        },
        // 发布状态；1：已发布；2：定时发布；3：草稿；
        {
          title: '发布状态',
          align: 'center',
          dataIndex: 'publishState_dictText',
          scopedSlots: {customRender: 'publishState'}
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 200,
          scopedSlots: {customRender: 'action'}
        }
      ],
      url: {
        list: '/article/listAll',
        delete: '/article/delete',
        isTop: '/article/isTop',
        deleteBatch: '/article/deleteBatch'
      },
      user: {},
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles'
    ])
  },
  created() {
    this.getUser()
  },
  methods: {
    getUser() {
      this.user = {
        name: this.name,
        role: this.roles.join(' | '),
      }
    },
    handleEdit(recordId) {
      this.$router.push({
        path: '/article/publish',
        query: {
          recordId: recordId
        }
      })
    },
    handleIsTop(record, istop) {
      record.isRecommend = istop
      postAction(this.url.isTop, record).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
        } else {
          record.isRecommend = '0'
          this.$message.error(res.message)
        }
      })
    },
    recycleBin() {
      this.$refs.recycleBin.showModal()
      this.$refs.recycleBin.title = '回收站'
      this.$refs.recycleBin.disableSubmit = true
    },

    onShowSizeChange(current, pageSize) {
      this.pagination.current = current
      this.pagination.pageSize = pageSize
      this.loadData()
    },
    onChange(pageNumber) {
      this.pagination.current = pageNumber
      this.loadData()
    },
  }
}
</script>
